<template>
  <div class="home">
    <p>崔幄程</p>
    <p>魏晓栋</p>
    <p>周子豪</p>
    <p>豆双龙</p>
    <p>弱鸡吗你是？？？</p>
    <div class="home_login">
      <p>
        <el-input placeholder="请输入用户名" v-model="userName">
          <i slot="prefix" class="el-input__icon el-icon-date"></i>
        </el-input>
      </p>
      <p>
        <el-input placeholder="请输入用户名" type="text" v-model="userPass">
          <i slot="prefix" class="el-input__icon el-icon-date"></i>
        </el-input>
      </p>
      <p @click="upUser()">
       
        <span>登陆</span>
      </p>
       <p>111</p>
    </div>
  </div>
</template>     
<script>
import http from "../until/user";
import qs from "qs";
export default {
  name: "home",
  data() {
    return {
      userName: "",
      userPass: ""
    };
  },
  methods: {
    upUser() {
      if (this.userName == "") {
        alert("用户名不能为空");
      } else {
        if (this.userPass == "") {
          alert("密码不能为空");
        } else {
          var params = {
            username: this.userName,
            pwd: this.userPass
          };
          http
            .post(
              "http://api.baxiaobu.com/index.php/home/v1/login",
              qs.stringify(params)
            )
            .then(res => {
              console.log(res.data);
              if (res.data.status == 200) {
                alert("登陆成功");
                console.log(res.data.data.user_name);
                this.$store.state.userNames = res.data.data.user_name;
                localStorage.setItem("person", res.data.data.user_name);
                this.$router.push({ path: "/about" });
              }
            });
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
@width: 100%;
.dis {
  display: flex;
  justify-content: center;
  align-items: center;
}
.home {
  width: 100%;
  height: 100%;
  .dis;
  background: #f0f2f5;
  .home_login {
    width: 350px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -175px;
    background: white;
    padding: 15px;
    box-sizing: border-box;
    p {
      display: flex;
      &:nth-child(3) {
        padding: 0 10px;
        box-sizing: border-box;
        span {
          display: block;
          width: 100%;
          height: 30px;
          border-radius: 5px;
          .dis;
          background: #409eff;
          color: white;
        }
      }
      span {
        display: inline-block;
        width: 30px;
        height: 40px;
        background: #f5f7fa;
        .dis;
      }
      input {
      }
    }
  }
}
.el-form-item__content,
#fronmss {
  margin-left: 0;
}
</style>
